<template>
  <div>
    <h1>header</h1>
    <p>count{{ this.$store.state.count }}</p>
    <p>{{ count }}</p>
    <p>{{ price }}</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  mounted() {
    console.log(this);
    console.log(mapState(["count", "price"]), "1");
    console.log(mapState(["count", "price"]).count, "2");
    console.log(mapState(["count", "price"]).count.call(this));
  },
  computed: {
    //直接使用mapState去获取store中的值,并且提供了计算属性给我们,我们展开放在computed中
    ...mapState(['count','price'])
    /* count() {
      return this.$store.state.count;
    },
    price() {
      return this.$store.state.price;
    }, */
  },
};
</script>

<style>
</style>